<script lang="ts" setup>
import { getGamesImg, getImg } from "@/utils";
const { currGame = {} } = defineProps<{
  currGame: any;
}>();
const { types } = useTypes();
const currType = computed(() =>
  types.value.find((item) => currGame.types.includes(item.name))
);
</script>
<template>
  <div
    class="w-full h-209 bg-no-repeat bg-cover bg-center backdrop-blur-sm"
  >
    <div class="flex flex-col justify-start items-center relative z-2 h-full">
      <img
        class="w-full h-full absolute inset-0 z-1 object-cover blur-1.2"
        :src="getGamesImg(currGame.pathPicture, '4')"
        alt=""
      />
      <img
        class="w-84 h-84 mt-51 icon relative z-2"
        :src="getGamesImg(currGame.pathPicture, '1')"
        alt=""
      />
      <p class="mt-12 font-600 text-17 color-[#000] lh-20 relative z-2">
        {{ currGame.name }}
      </p>
      <div class="mt-17 flex justify-start items-center gap-x-18">
        <div class="flex justify-start items-center gap-x-7">
          <img class="h-17" :src="getImg('yq_pingfen.png')" alt="" />
          <span class="font-500 text-14 color-[#000] lh-17"
            >{{ currGame.score }}/10</span
          >
        </div>
        <div class="flex justify-start items-center gap-x-7 relative z-2">
          <img class="h-17" :src="currType.icon" alt="" />
          <span class="font-500 text-14 color-[#000] lh-17">{{
            currGame.type
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.icon {
  filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.45));
}
</style>